
<template>
<div>
    <!-- 要使用Radio组件，只需要设置v-model绑定变量，选中意味着变量的值为相应Radio label属性的值，label可以是String、Number或Boolean -->

    <!-- 基础使用 -->
    <el-row>
        <el-radio v-model="radio" label="白天">☀</el-radio>
        <el-radio v-model="radio" label="黑夜">🌙</el-radio>
    </el-row>
    <br>

    <!-- 按钮样式 -->
    <el-row>
        <el-radio-group v-model="radio1">
            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="上海"></el-radio-button>
            <el-radio-button label="广州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
    </el-row>
    <br>
    <!-- 老师上课的例子 -->
    <el-row>
        <el-radio-group v-model="radioValue" @change="handleRadioChange">
            <el-radio label="usa"> 美国 </el-radio>
            <el-radio label="cn"> 中国 </el-radio>
        </el-radio-group>
    </el-row>
</div>
</template>



<script>
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() { 
//这里存放数据
return {
    radio:"白天",
    radio1:"北京",
    radioValue:"usa"
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    handleRadioChange:function(lable){
        console.log("选中:",lable);
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>


<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
</style>

<style lang="less" scoped>


</style>